<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员控制台 - 连连看游戏系统</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <style>
        /* 管理员专属配色 */
        :root {
            --admin-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --admin-primary: #f093fb;
            --admin-dark: #f5576c;
        }

        body {
            background: var(--admin-gradient);
        }

        .admin-container {
            max-width: 1400px;
            margin: 90px auto 40px;
            padding: 0 var(--spacing-lg);
        }

        .admin-header {
            background: var(--bg-white);
            border-radius: var(--radius-xl);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-lg);
            box-shadow: var(--shadow-md);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .admin-title h1 {
            font-size: 32px;
            background: var(--admin-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: var(--spacing-xs);
        }

        .admin-title p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .quick-actions {
            display: flex;
            gap: var(--spacing-sm);
        }

        .action-btn {
            padding: var(--spacing-sm) var(--spacing-lg);
            background: var(--admin-gradient);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
        }

        .stat-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--admin-gradient);
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .stat-icon {
            font-size: 48px;
            margin-bottom: var(--spacing-sm);
            display: block;
        }

        .stat-value {
            font-size: 42px;
            font-weight: 700;
            background: var(--admin-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: var(--spacing-xs);
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stat-trend {
            margin-top: var(--spacing-xs);
            font-size: 13px;
            color: var(--success-color);
        }

        .chart-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: var(--spacing-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: var(--spacing-lg);
        }

        .chart-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
            padding-bottom: var(--spacing-sm);
            border-bottom: 2px solid var(--border-light);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--spacing-lg);
        }

        .info-item {
            padding: var(--spacing-md);
            background: var(--bg-gray-light);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--admin-primary);
        }

        .info-item-label {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: var(--spacing-xs);
        }

        .info-item-value {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .loading-state {
            text-align: center;
            padding: var(--spacing-xl);
            color: var(--text-tertiary);
        }

        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid var(--border-light);
            border-top-color: var(--admin-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .navbar.admin-nav {
            background: rgba(255, 255, 255, 0.98);
            border-bottom: 2px solid var(--admin-primary);
        }

        .nav-logo.admin-logo {
            background: var(--admin-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-menu a.active {
            background: var(--admin-gradient);
        }
    </style>
</head>
<body>
    <nav class="navbar admin-nav">
        <div class="nav-container">
            <div class="nav-logo admin-logo">👑 管理员控制台</div>
            <div class="nav-menu">
                <a href="#" class="active">控制台</a>
                <a th:href="@{/admin/user/list}">用户管理</a>
                <a th:href="@{/admin/logout}">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="admin-container">
        <div class="admin-header">
            <div class="admin-title">
                <h1>管理员控制台</h1>
                <p>欢迎回来，<span th:text="${admin.realName}">管理员</span> | 上次登录：<span th:text="${#temporals.format(admin.lastLoginTime, 'yyyy-MM-dd HH:mm')}">-</span></p>
            </div>
            <div class="quick-actions">
                <a th:href="@{/admin/user/list}" class="action-btn">👥 用户管理</a>
                <button class="action-btn" onclick="refreshData()">🔄 刷新数据</button>
            </div>
        </div>

        <!-- 核心统计数据 -->
        <div class="stats-grid">
            <div class="stat-card">
                <span class="stat-icon">👥</span>
                <div class="stat-value" id="totalUsers">-</div>
                <div class="stat-label">总用户数</div>
                <div class="stat-trend">活跃: <span id="activeUsers">-</span></div>
            </div>

            <div class="stat-card">
                <span class="stat-icon">🎮</span>
                <div class="stat-value" id="totalGames">-</div>
                <div class="stat-label">总游戏场次</div>
                <div class="stat-trend">单机: <span id="singleGames">-</span></div>
            </div>

            <div class="stat-card">
                <span class="stat-icon">🏆</span>
                <div class="stat-value" id="totalScore">-</div>
                <div class="stat-label">总积分</div>
                <div class="stat-trend">最高: <span id="maxScore">-</span></div>
            </div>

            <div class="stat-card">
                <span class="stat-icon">🌟</span>
                <div class="stat-value" id="onlineUsers">-</div>
                <div class="stat-label">在线用户</div>
                <div class="stat-trend" id="onlineRate">-</div>
            </div>
        </div>

        <!-- 系统详情 -->
        <div class="chart-card">
            <h3 class="chart-title">
                <span>📊</span>
                <span>系统详细数据</span>
            </h3>
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-item-label">启用用户</div>
                    <div class="info-item-value" id="activeUsersDetail">-</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">禁用用户</div>
                    <div class="info-item-value" id="disabledUsers">-</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">单机游戏</div>
                    <div class="info-item-value" id="singleGamesDetail">-</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">对战游戏</div>
                    <div class="info-item-value" id="battleGames">-</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">最高分玩家</div>
                    <div class="info-item-value" id="topPlayer">-</div>
                </div>
                <div class="info-item">
                    <div class="info-item-label">今日新增</div>
                    <div class="info-item-value" id="todayNewUsers">0</div>
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="chart-card">
            <h3 class="chart-title">
                <span>⚡</span>
                <span>快捷操作</span>
            </h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md);">
                <a th:href="@{/admin/user/list}" class="btn btn-primary">用户管理</a>
                <button class="btn btn-secondary" onclick="showComingSoon()">游戏管理</button>
                <button class="btn btn-secondary" onclick="showComingSoon()">道具管理</button>
                <button class="btn btn-secondary" onclick="showComingSoon()">系统设置</button>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 LinkUp 连连看管理系统. All rights reserved.</p>
            <p>保护用户隐私，维护系统安全</p>
        </div>
    </footer>

    <script>
        // 页面加载时获取统计数据
        window.addEventListener('load', function() {
            loadStatsData();
        });

        function loadStatsData() {
            showLoading();
            
            fetch('/admin/stats/data')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        updateStats(data.data);
                    } else {
                        showError('加载数据失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('获取统计数据失败:', error);
                    showError('网络错误，请稍后重试');
                });
        }

        function updateStats(stats) {
            // 更新核心数据
            document.getElementById('totalUsers').textContent = stats.totalUsers;
            document.getElementById('activeUsers').textContent = stats.activeUsers;
            document.getElementById('totalGames').textContent = stats.totalGames;
            document.getElementById('singleGames').textContent = stats.singleGames;
            document.getElementById('totalScore').textContent = formatNumber(stats.totalScore);
            document.getElementById('maxScore').textContent = stats.maxScore;
            document.getElementById('onlineUsers').textContent = stats.onlineUsers;
            
            // 计算在线率
            const onlineRate = stats.totalUsers > 0 ? 
                ((stats.onlineUsers / stats.totalUsers) * 100).toFixed(1) : 0;
            document.getElementById('onlineRate').textContent = '在线率: ' + onlineRate + '%';
            
            // 更新详细数据
            document.getElementById('activeUsersDetail').textContent = stats.activeUsers;
            document.getElementById('disabledUsers').textContent = stats.disabledUsers;
            document.getElementById('singleGamesDetail').textContent = stats.singleGames;
            document.getElementById('battleGames').textContent = stats.battleGames;
            document.getElementById('topPlayer').textContent = stats.topPlayer;
            document.getElementById('todayNewUsers').textContent = stats.todayNewUsers;
            
            // 动画效果
            animateNumbers();
        }

        function formatNumber(num) {
            if (num >= 1000000) {
                return (num / 1000000).toFixed(1) + 'M';
            } else if (num >= 1000) {
                return (num / 1000).toFixed(1) + 'K';
            }
            return num;
        }

        function animateNumbers() {
            const elements = document.querySelectorAll('.stat-value');
            elements.forEach(el => {
                const text = el.textContent;
                if (text !== '-' && !isNaN(parseInt(text))) {
                    el.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        el.style.transition = 'transform 0.3s ease';
                        el.style.transform = 'scale(1)';
                    }, 100);
                }
            });
        }

        function showLoading() {
            const values = document.querySelectorAll('.stat-value');
            values.forEach(el => el.textContent = '-');
        }

        function showError(message) {
            alert(message);
        }

        function refreshData() {
            loadStatsData();
        }

        function showComingSoon() {
            alert('功能正在开发中，敬请期待！');
        }
    </script>
</body>
</html>
